<template>
  <a-tabs class="base-tabs" v-bind="$attrs">
    <a-tab-pane v-for="pane in safeTabList" :key="pane.key" :tab="pane.title" :closable="pane.closable">
      <!-- 动态组件渲染 -->
      <component :is="pane.component" v-bind="pane.props || {}" v-if="pane.component" @handleListEmit="(data) => emit('handleListEmit', data)" />
      <!-- 插槽渲染（可选） -->
      <slot :name="pane.key" v-bind="pane.props || {}" v-else></slot>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import { isProxy } from 'vue'

defineOptions({ name: 'BeTabs', inheritAttrs: false })
const emit = defineEmits(['handleListEmit'])
const props = defineProps({
  tabList: {
    type: Array,
    required: true
  }
})

const safeTabList = computed(() => {
  return props.tabList.map((pane) => {
    let component = pane.component
    // 仅当 component 是 Proxy（即是响应式）才需要 markRaw
    if (component && isProxy(component) && (typeof field.component === 'function' || typeof field.component === 'object')) {
      component = markRaw(component)
    }
    return { ...pane, component }
  })
})
</script>
<style lang="scss">
.base-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .ant-tabs-nav {
    margin-bottom: 0;
    background-color: var(--color-white);
    .ant-tabs-tab {
      padding: 8px 16px;
      margin: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
      &.ant-tabs-tab-active {
        color: var(--primary);
        background-color: rgb(230 247 255);
      }
      .ant-tabs-tab-remove {
        font-size: 14px;
        color: inherit;
      }
    }
    .ant-tabs-ink-bar {
      visibility: visible;
      background-color: var(--primary);
    }
  }
  .ant-tabs-content-holder {
    flex: 1;
    overflow: hidden;
  }
  .ant-tabs-content {
    height: 100%;
  }
  .ant-tabs-tabpane {
    height: 100%;
    background-color: var(--color-white);
  }
}
</style>
